<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { router } from "@/router";

import { useRouter, useRoute } from "vue-router";

import { queryWorkOrder, editWorkOrder } from "@/api/task";
import { message } from "@/utils/message";
import { copyTextToClipboard } from "@pureadmin/utils";

defineOptions({
  name: "OrderDetailList",
});

const route = useRoute();

const formInline = reactive({
  policy_name: "",
  taskName: "",
  creater: "",
  task_id: "",
  ipscope: "",
  createTime: "",
  tacticsName: "",
  level: "",
});

const formAddHardware = reactive({
  taskType: "",
  taskName: "",
  taskRegion: "",
  startTime: "", //启动时间
  linkTactics: "", //关联策略
  cron: "", //cron表达式
  monthDay: "",
  weekDay: "",
  isFiling: "0",
  claim: "0",
});

const addTaskFormRef = ref<FormInstance>();

const hardwareRules = reactive<FormRules>({
  taskName: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
  taskRegion: [
    {
      required: true,
      message: "请填写工单备注",
      trigger: "blur",
    },
  ],
  taskType: [
    {
      required: true,
      message: "请选择一个任务类别",
      trigger: "change",
    },
  ],
  isFiling: [
    {
      required: true,
      message: "请选择一个任务类别",
      trigger: "change",
    },
  ],
  claim: [
    {
      required: true,
      message: "请选择一个任务类别",
      trigger: "change",
    },
  ],
  linkTactics: [
    {
      required: true,
      message: "请关联策略",
      trigger: "change",
    },
  ],
});

const showAddHardwareDialog = ref(false);

const tableData = ref([
  {
    name: "工单1",
  },
]);

const currentPage = ref(1); // 当前页码
const pageSize = ref(20); // 每页显示的条数
const totalTabalData = ref(0); // 总条数

//编辑任务
const editorTask = () => {
  editWorkOrder({
    work_order_id: orderId.value,
    claim_status: formAddHardware.claim,
    report_status: formAddHardware.isFiling,
    report_asset_screenshot_url: "",
  }).then((res) => {
    if (res.code === 2000) {
      showAddHardwareDialog.value = false;
    }
  });
};

//报备改变
const filingChange = () => {};

const queryWorkOrderList = () => {
  queryWorkOrder({
    work_order_id: orderId.value,
  }).then((res) => {
    if (res.code === 2000) {
      tableData.value = [res.data];
      // totalTabalData.value = res.total;
    }
  });
};

const gotoOrderDetail = (rowdata) => {
  router.push("/workorder/orderdetail");
};

watch(showAddHardwareDialog, (newVal, oldVal) => {
  // resetAddTaskForm();
});

const orderId = ref(""); // 当前页码

const convertNewLines = (text) => {
  return text.replace(/\r\n/g, "<br>");
};

//复制资产
const copyAsset = (params) => {
  const success = copyTextToClipboard(params);
  message("复制成功", { type: "success" });
};

onMounted(() => {
  const orderid = route.query.orderid;
  orderId.value = orderid as string;
  queryWorkOrderList();
});
</script>

<template>
  <div>
    <div class="">
      <el-card shadow="never">
        <template #header v-if="false">
          <div class="card-header">
            <el-form
              :inline="true"
              :model="formInline"
              size="small"
              class="demo-form-inline"
              @submit.prevent
            >
              <el-form-item v-if="false">
                <el-button type="primary" @click="showAddHardwareDialog = true"
                  >新建任务</el-button
                >
              </el-form-item>

              <el-form-item label="名称">
                <el-input
                  v-model="formInline.tacticsName"
                  placeholder="名称"
                  maxlength="30"
                  clearable
                  @keydown.enter="queryWorkOrderList"
                >
                  <template #append>
                    <el-button :icon="Search" @click="queryWorkOrderList" />
                  </template>
                </el-input>
              </el-form-item>
              <!-- 写一个下拉框，里面是等级分类，用户更加等级变化调用查询接口 -->
              <el-form-item label="漏洞等级" v-if="false">
                <el-select
                  v-model="formInline.level"
                  placeholder="请选择"
                  @change="queryWorkOrderList"
                >
                  <el-option label="全部" value="" />
                  <el-option label="紧急" value="critical" />
                  <el-option label="高危" value="high" />
                  <el-option label="中危" value="medium" />
                  <el-option label="低危" value="low" />
                  <el-option label="信息" value="info" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </template>

        <el-table :data="tableData" style="width: 100%">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column type="index" width="80" label="序号" />
          <el-table-column label="资产" prop="unreported_assets">
            <template #default="rowscope">
              <span v-html="convertNewLines(rowscope.row.unreported_assets)" />
            </template>
          </el-table-column>
          <el-table-column label="">
            <template #default="rowscope">
              <div>
                <el-link
                  type="primary"
                  :underline="true"
                  @click="copyAsset(rowscope.row.unreported_assets)"
                  >复制</el-link
                >
              </div>
            </template>
          </el-table-column>

          <el-table-column label="处理人" prop="work_order_handler" />
          <el-table-column label="认领状态" prop="claim_status">
            <template #default="rowscope">
              <span>{{
                rowscope.row.claim_status == "0" ? "未认领" : "已认领"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回复确认" width="250">
            <template #default="rowscope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="rowscope.row.report_asset_screenshot_url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[rowscope.row.report_asset_screenshot_url]"
                  :initial-index="4"
                  :z-index="99999"
                  :preview-teleported="true"
                  :hide-on-click-modal="true"
                  fit="cover"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="报备状态" prop="status">
            <template #default="rowscope">
              <span>{{
                rowscope.row.report_status == "0" ? "未报备" : "已报备"
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right">
            <template #default="rowscope">
              <el-button
                size="small"
                type="success"
                @click="showAddHardwareDialog = true"
              >
                编辑</el-button
              >
              <!-- <el-button size="small" type="warning"> 删除</el-button>
              <el-button size="small" class="el-btn-zese"> 执行</el-button>
              <el-button size="small"> 添加脚本</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="queryWorkOrderList"
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          v-model:page-size="pageSize"
          @size-change="queryWorkOrderList"
          layout="total, sizes, prev, pager,next"
          :total="totalTabalData"
          background
        />
      </el-card>

      <el-dialog
        v-model="showAddHardwareDialog"
        :show-close="true"
        destroy-on-close
        width="500px"
      >
        <template #header="{ titleId, titleClass }">
          <div class="my-header">
            <h4 :id="titleId" :class="titleClass">编辑工单</h4>
          </div>
        </template>

        <el-form
          :inline="false"
          :model="formAddHardware"
          :rules="hardwareRules"
          ref="addTaskFormRef"
          class="demo-form-inline"
        >
          <el-form-item label="是否认领" label-width="100px" prop="isFiling">
            <el-radio-group
              v-model="formAddHardware.isFiling"
              @change="filingChange"
            >
              <el-radio label="0">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否报备" label-width="100px" prop="claim">
            <el-radio-group
              v-model="formAddHardware.claim"
              @change="filingChange"
            >
              <el-radio label="0">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="报备截图" label-width="100px">
            <!-- <el-input
              v-model="formAddHardware.taskRegion"
              placeholder="请填写工单备注!"
              class="min-w-input"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              clearable
            /> -->
            <el-link type="primary" :underline="true">报备资产截图上传</el-link>
            <!-- @click="copyAsset(rowscope, 'normal')" -->
          </el-form-item>
        </el-form>

        <template #footer>
          <div>
            <el-button @click="showAddHardwareDialog = false"> 取消 </el-button>
            <el-button type="primary" @click="editorTask(addTaskFormRef)">
              <!-- <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon> -->
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

:deep(.el-pagination) {
  justify-content: right;
  margin-top: 10px;
  margin-right: 30px;
}
.gather-container {
  display: block;
  margin-bottom: 10px;
}

.min-w-input {
  width: 300px;
}

.el-btn-zese {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.el-btn-zese.is-disabled,
.el-btn-zese.is-disabled:focus,
.el-btn-zese.is-disabled:hover {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}
</style>
